<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- jquery -->
  <script src="../../frame/semanticUI/jquery.min.js"></script>
  <!-- CDN引入semanticUI框架 -->
  <link rel="stylesheet" type="text/css" href="../../frame/semanticUI/UI-master/semantic.min.css">
  <!-- semanticUI依赖于Jquery -->
  <script src="../../frame/semanticUI/UI-master/semantic.min.js"></script>

  <link rel="stylesheet" href="../../frame/elementUI/lib-master/theme-chalk/index.css"/>
  <!-- 必须先引入vue，  后使用element-ui -->
  <script src="../../frame/elementUI/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script src="../../frame/elementUI/lib-master/index.js"></script>

  <link rel="stylesheet" href="../../css/back.css" >
  <title>分类管理页</title>

</head>

<script>
  $(function () {
    $('.ui.dropdown').dropdown({
      on: 'hover'
    });
  });
</script>
<body>
<div id="app">
  <!-- 导航 -->
  <nav class="ui inverted attached segment" style="padding-top: 5px;height: 70px;padding-left: 100px">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui teal header item">管理后台</h2>
      <a href="../host/manage.html"  class="m-item item" ><i class="home icon"></i>博客</a>
      <a href="../type/types.html"  class="m-item active item"><i class="idea icon"></i>分类</a>
      <a href="../record/archives.html"  class="m-item item" ><i class="clone icon"></i>归档</a>
      <a href="../tag/tags.html"  class="m-item item"><i class="tags icon"></i>标签</a>

      <div class="ui right floated dropdown item">
        <div class="text">
          <img v-bind:src="admin.imgAvatar" class="ui avatar image">
          <strong >{{admin.username}}</strong>
        </div>
        <i class="ui dropdown icon"></i>
        <div class="menu">
          <a href="#" class="item">个人中心</a>
          <a href="/user/logout" class="item">注销</a>
        </div>
      </div>
    </div>
  </nav>
  <!-- 二级菜单 -->
  <div class="ui attached pointing menu">
    <div class="ui container">
      <div class="right menu">
        <a href="types-input.html" class="item">发布</a>
        <a href="types.html" class="active item">列表</a>
      </div>
    </div>
  </div>
  <!-- 中间内容 -->
  <div style="padding-top: 40px;">
    <div class="ui container" style="width: 1000px">
      <!-- 文章展示表格 -->
      <!-- dataList查询出来的列表，header-cell-style表头颜色,使用reserve-selection属性必须配合row-key,selection-change:多选，当选择项发生变化时会触发该事件 -->
      <el-table height="400" border :data="page.content" v-loading="loading"
                :header-cell-style="{background:'#f9f9f9',color:'#333'}" row-key="id"
                @selection-change="handleSelectionChange" @row-click="handleRowClick" ref="multipleTable">
          <el-table-column type="selection" label="全选" :reserve-selection="true" min-width="3%"></el-table-column>  <!-- reserve-selection选择其他页时，之前页选的的框依然存在 -->
          <el-table-column prop="id" label="id" min-width="7%"></el-table-column>
          <el-table-column prop="name" label="名称" min-width="70%"></el-table-column>
          <el-table-column label="操作" min-width="20%">
              <template slot-scope="scope">   <!-- 将整个行对象封装为scope -->
                  <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                  <el-button type="danger" size="mini" @click="rowDelete(scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <!-- 按钮组 -->
      <div style="margin-top: 10px">
        <tr>
          <th colspan="6">
              <el-button type="info" @click="Previous()" plain :disabled="page.firstPage==false">上一页</el-button>
              <el-button type="info" @click="Next()" plain :disabled="page.lastPage==false" >下一页</el-button>
              <el-button @click="JumpInput()" icon="el-icon-plus" type="primary" style="float: right">新增</el-button>
              <el-button @click="delAll()" type="danger" icon="el-icon-delete"  style="float: right;margin-right: 20px" :disabled="multipleSelection.length==0">
                一键删除
              </el-button>
          </th>
        </tr>
        </div>
    </div>
  </div>
  <!-- 修改数据弹框 -->
  <div class="updata-form">
    <el-dialog title="修改数据" :visible.sync="dialogUpdateVisible">
      <el-form ref="dataUpdateForm":model="elUpdate" :rules="rules" label-position="right" label-width="100px" :clearable="true">
        <el-row>
          <el-col :span="24">
            <el-form-item label="分类名称" prop="name"><el-input v-model="elUpdate.name"/></el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUPdate()">取消</el-button>
        <el-button type="primary" @click="rowUpdate()">确定</el-button>
      </div>
    </el-dialog>
  </div>

</div>
</body>
  <!-- axios -->
  <script src="../../frame/axios/axios.min.js"></script>
<script>

  Vue.config.productionTip=false  //以阻止 vue 在启动时生成生产提示。 <!-- 全局配置 -->
  new Vue({
    el:'#app',
    data:{
        loading: false,   //页面加载,false:关闭,true:加载中
        dialogFormVisible: false,   //是否弹出的添加窗口
        dialogUpdateVisible: false,   //是否弹出的修改窗口
        admin:{
          username: '',
          imgAvatar: ''
        },
        //分类列表数据
        page:{
          content:[],
          currentPage: 0,   //当前页
          pageSize: 3,  //当前页条数
          total: 1,  //数据总条数
          pages : 1,  //总页数
          firstPage : false,  //是否有前一页
          lastPage: false,  //是否有下一页
        },
        elAdd:{},    //添加数据
        elUpdate:{},   //修改数据
        //分类新增数据规则
        rules: {
          name: [
                  {required: true, message: '此名称不能为空', trigger: 'blur'},
                  { min:2,max:80, message: '此名称不能小于3位,，大于80位', trigger: 'blur'},
              ],  //blur失去焦点
        },
        //复选框
        multipleSelection: []
    },
    //钩子函数，VUE对象初始化完成后自动执行
    created(){
        this.findData();
        this.findPage();
    },
    methods:{
        //获取用户信息
        findData(){
            axios({
              method: "GET",
              url: "/user/gainData",
            }).then((res)=>{
              console.log(res.data);
              if(res.data==''){
                this.$message("您尚未登录")
              }else{
                this.admin.username=res.data.username;
                this.admin.imgAvatar=res.data.avatar;
              }
            });
        },
        //获取当前页数据
        findPage(){
            this.loading=true;
            axios({
              method: "GET",
              url: "/type/list/"+this.page.currentPage+"/"+this.page.pageSize,
            }).then((res)=>{
              console.log(res.data);
              this.page.content=res.data.content;
              this.page.currentPage=res.data.number;
              this.page.pageSize=res.data.size;
              this.page.total=res.data.totalElements;
              this.page.pages=res.data.totalPages;
              this.page.firstPage=!res.data.first;
              this.page.lastPage=!res.data.last;
              setTimeout(function () {
              },1000)
              this.loading=false;  //关闭加载
            });
        },
        //弹出修改窗口
        handleUpdate(row){
          axios({
            method: "get",
            url: "/type/selectId/"+row.id,
          }).then((res)=>{
            console.log(res);
            if(res.data.id==row.id){
              this.dialogUpdateVisible=true;
              this.elUpdate=res.data;
            }else{
              this.$message("系统异常，自动刷新");
            }
          });
        },
        //添加弹窗和修改弹窗的取消按钮
        cancelUPdate(){
          this.dialogFormVisible=false;   //当前添加弹窗
          this.dialogUpdateVisible=false; //当前修改弹窗
          this.$message("当前操作取消");
        },
        //行更新数据
        rowUpdate(row){
            axios({
                method: "PUT",
                url: "/type/updateRow",
                data: this.elUpdate,
              }).then((res)=>{
                console.log(res);
                if(res.data == true){
                  this.dialogUpdateVisible=false; //当前修改弹窗
                  this.$message({
                    message:"修改成功",
                    type:"success"
                  });
                }else{
                  this.$message("修改失败，请重试");
                }
              }).finally(()=>{
                this.findPage();
              });
        },
        //行删除数据
        rowDelete(row){
            this.$confirm("此操作将从数据库中永久删除数据，是否继续？","提示",{
              confirmButtonText:"确定",
              cancelButtonText:"取消",
              type: "warning"
            }).then(()=>{   //选择确定的情况
                axios({
                  method: "delete",
                  url: "/type/deleteRow/"+row.id,
                }).then((res)=>{
                  console.log(res);
                  if(res.data.flag=true){
                    this.$message({
                      message:"删除成功",
                      type:"success"
                    });
                  }else{
                    this.$message(" 删除失败，请重试");
                  }
                }).finally(()=>{
                  this.findPage();
                });
            }).catch(()=>{     //选择取消的情况
              this.$message({
                type:"into",
                message:"已取消删除"
              });
            });
        },
        //多行删除
        delAll(){
          this.$confirm("此操作将从数据库中永久删除数据，是否继续？","提示",{
            confirmButtonText:"确定",
            cancelButtonText:"取消",
            type: "warning"
          }).then(()=>{   //选择确定的情况
              for(type of this.multipleSelection){
                  axios({
                    method: "delete",
                    url: "/type/deleteRow/"+type.id,
                  }).then((res)=>{
                    console.log(res);
                    if(res.data=false){
                      this.$message(" 删除失败，请重试");
                    }
                  });
              }
              this.$message({
                message:"删除成功",
                type:"success"
              });
              this.findPage();
          }).catch(()=>{     //选择取消的情况
              this.$message({
                type:"into",
                message:"已取消删除"
              });
          });
        },
        //多选
        handleSelectionChange(rows){
            this.multipleSelection = rows;
            // console.log(this.multipleSelection);  //打印选中的行集合
        },
        //行选框
        handleRowClick(row){
          this.$refs.multipleTable.toggleRowSelection(row);
          // console.log(row)  //打印的时当前选中的行
        },
        //上一页
        Previous(){
          this.page.currentPage=this.page.currentPage-1;
          this.findPage();
        },
        //下一页
        Next(){
          this.page.currentPage=this.page.currentPage+1;
          this.findPage();
        },
        //跳转新增页面
        JumpInput(){
          location.href = "types-input.html";
        }
    }
  });
</script>
</html>